@charset "utf-8";
/* CSS Document */
/* 设置默认属性 */
*{ 
	margin: 0; 
	padding: 0; 
	box-sizing: border-box; 
	/* 字体样式 */
    font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif; 
	font-size: 14px;
} 

/* 根伪类--为自定义CSS属性 方便重复使用同一个属性 用var()进行调用 */
:root { 
	/* 主色调（黄）、主题色、副色 */
	--primary-color: #f79f1f;
	--secondary-color: #e3e3e3;
	--text-color-lightest: #e7e9ec; 
    --text-color-darker: #2e2e2e; 
	--text-color-dark: #494949; 
	--text-color-gray: #8b8b8b;
    --text-color-dark-gray: #727272; 
	--text-color-light-gray: #c6c6c6;
	/* 背景层遮罩颜色 */
    --backdrop-color: rgba(42, 42, 42, 0.69);
    /* 盒子阴影 */
	--box-shadow:0 0.9rem 1.7rem rgba(0,0,0,0.25);
	/* 登录注册按钮外边框圆角属性 */
	--button-radius: 5px;	
}

/* 设置头部样式 */
header{ 
	width: 100vw; 
	height: 80px; 
	display: grid; 
	padding: 0 40px; 
    grid-template-columns: 1fr 2fr;
    align-items: center; 
	position: relative; 
	z-index: 200; 
}

.logo {
	font-size: 24px; 
	font-weight: 600; 
	color: var(--primary-color); 
}

.logo img{
	width: 24px;
	height: auto;
	vertical-align: middle;
}

header nav{
	justify-self: end;
}

header nav a{
	color: var(--text-color-dark-gray);
	text-decoration: none;
	margin: 0 24px;
}

header nav a:hover{
	color: var(--primary-color);
	text-decoration: underline;
	margin: 0 24px;
}

header .burger{
	display: none;
}

/* 设置固定导航 */
header.sticky{
	position: fixed;
	background-color: white;
	box-shadow: 0 0 18px rgba(0,0,0,0.2);
	animation: dropDown 0.5s ease-in-out forwards;
}

header.sticky .logo,
header.sticky nav a,
header.sticky nav i{
	color: var(--text-color-darker);
}
        /* 定义导航向下滑动动画 */
@keyframes dropDown{
	from{
		transform: translateY(-100px);
	}
	to{
		transform: translateY(0);
	}
}


/* 我的简历部分样式 */
.container_box{
	align-items: center;
	display: grid;
	place-items: center;
}

.container{
	background-color: #fff;
	border-radius: var(--button-radius);
	box-shadow: var(--box-shadow);
	height: 500px;
	width: 100%;
	max-width: 800px;
	overflow: hidden;
	position: relative;	
}

.container_form{
	margin: 0 0 36px;
	padding: 25px 32px;
}

h1{
	font-size: 26px;
	color: var(--text-color-darker);
}

.btn{
	top: 28px;
	right: 38px;
	position: absolute;
	width: 100%; 
	text-align: center; 
	font-size: 0; 
}

.btn_update{
	
	float: right;
	display: inline-block; 
	width: 106px; 
	height: 32px; 
    background: var(--primary-color); 
    color: #fff; 
	border-radius: 16px; 
	font-size: 14px;
	font-weight: 400;
	line-height: 30px;    /* 距离顶部 */
	opacity: 0.8;
    transition: 0.3s;
	text-decoration: none;
}

.btn .btn_update:hover{
	opacity: 1;
}

p{
	margin: 20px 0 0;
	color: var(--text-color-dark-gray);
}

.line{
	width: 4px;
	height: 16px;
	background: var(--primary-color);
	display: inline-block;
	margin-right: 10px;
	margin-left: -16px;
}

h2{
	font-size: 20px;
	font-weight: 600;
	color: var(--text-color-dark);
	padding: 0 32px 0 18px;
	margin-top: 50px;
}

.container_child{
	padding: 24px 32px 0px 18px;
}

.container_right{
	top: 200px;
	right: 38px;
	position: absolute;
	width: 100%; 
	text-align: center; 
	font-size: 0; 
}

.container_child img{
	float: right;
	display: inline-block; 
	
}

h3{
	font-size: 24px;
	margin-bottom: 10px;
	font-weight: 500;
	color: var(--text-color-dark); 
}

.dv{
	padding: 11px 11px;
	
}
span{
	font-size: 16px;
	color: var(--text-color-gray);
}

i{
	margin-top: 20px;
	margin-right: 16px;
	font-size: 14px;
	color: var(--text-color-gray);
}

.dv1{
	padding: 0 36px 0 0;
}

/* 编辑简历页面样式 */


/* 底部模块样式 */
footer{
	margin-top: 124px;
	background-color: #181818;
	display: grid;
	justify-items: center;
	padding-top: 72px;
	padding-bottom: 24px;
}

.footer-menus{
	width: 100%;
	max-width: 1180px;
	display: grid;
	grid-template-columns: 2fr repeat(4,1fr);
	padding: 0 80px;
	position: relative;
}

.menu-title{
	font-size: 16px;
	color: white;
	font-weight: 500;
	margin-bottom: 20px;
}

.contact-us{
	justify-self: start;
	color: var(--text-color-lightest);
}

.contact-us p:not(first-child){
	padding-bottom: 16px;
}

.menu-items li{
	list-style: none;
	padding-bottom: 8px;
}

.menu-items li a{
	text-decoration: none;
	font-weight: 300;
	color: var(--text-color-lightest);
}

.icp-info{
	margin-top: 24px;
	margin-bottom: 16px;
}

.icp-info,.rights{
	grid-column: 1 / -1;
	justify-self: center;
	color: white;
}

/* 实现响应式配置 */
@media (max-width: 1100px){
	header nav{
		display: none;
	}
	
	header{
		grid-template-columns: repeat(2,1fr);
	}
	
	header .burger{
		display: block;
		width: 20px;
		height: 6px;
		position: relative;
		justify-self: end;
		cursor: pointer;
	}
	
	header .container{
        right: 15%;
    }
	
	.burger-line1, 
	.burger-line2, 
	.burger-line3{
		width: 20px;
		height: 2px;
		background-color: var(--text-color-lightest);
	}
	
	.burger-line1{
		position: absolute;
		top: -6px;
	}
	
	.burger-line3{
		position: absolute;
		top: 6px;
	}
	
	header.open nav{
		display: grid;
		position: absolute;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background-color: white;
		grid-auto-rows: max-content;
	    justify-items: end;
		padding: 0 40px;
		opacity: 0;
		animation: slideDown 0.6s ease-out forwards;
	}
	
	header.open nav > *{
		color: var(--text-color-darker);
		animation: showMenu 0.5s linear forwards 0.4s;
		font-size: 18px;
		margin: 4px 0;
		opacity: 0;
	}
	
	header.open nav > i.fas{
		margin-top: 10px;
	}
	
	header.open .burger-line1{
		transform: rotate(45deg) translate(3px, 5px);
	}
	
	header.open .burger-line2{
		transform: translateX(5px);
		opacity: 0;
	}
	
	header.open .burger-line3{
		transform: rotate(-45deg) translate(3px, -5px);
	}
	
	header.open .burger-line1, 
	header.open .burger-line2, 
	header.open .burger-line3,
	header.sticky .burger-line1,
	header.sticky .burger-line2,
	header.sticky .burger-line3{
		background-color: var(--text-color-darker);
		transition: 0.4s ease;
	}
	
	header.open .logo{
		z-index: 40;
		color: var(--text-color-darker);
	}
	
    @keyframes slideDown {
		from {
			height: 0;
			opacity: 0;
		}
	    to {
			height: 100vh;
			padding-top: 80px;
			opacity: 1;
		}
	}
	
	@keyframes showMenu {
		from {
			opacity: 0;
			transform: translateY(-1vh);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	.service-item .service-titile{
		font-size: 20px;
	}
	
	.service-item .service-content{
		font-size: 14px;
		line-height: 24px;
	}
	
	.team-members{
		grid-template-columns: repeat(2, 1fr);
		row-gap: 36px;
		column-gap: 6vw;
	}
	
	.activities{
		grid-template-columns: repeat(2, 1fr);
		row-gap:36px; 
	}
}

@media (max-width: 992px){
	.slide-caption h1{
		font-size: 35px;
	}
	
	.slide-caption h3{
		font-size: 18px;
	}
	
	.features, .services{
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: unset; 
	}
	
	.data-section {
		grid-template-columns: repeat(2,minmax(200px,auto));
		padding: 24px 0;
		height: auto;
		row-gap: 24px;
		background-size: 200%;
	}
	
	.showcases .case-item{
		width: calc(100vw / 3);
	}
}



